<template>
  <div>
    <el-tabs style="margin-bottom: 0" v-model="editableTabsValue" type="card" closable @tab-remove="removeTab"
      @contextmenu.native.prevent="onContextMenu(editableTabsValue, $event)" @tab-click="clickTab">
      <el-tab-pane v-for="item in editableTabs" :key="item.href" :label="item.name" :name="item.href" ref="tabpane">

      </el-tab-pane>
    </el-tabs>
    <ul v-show="showContextMenu" class="contex-menu-wrapper" :style="contextMenuStyle">
      <li>
        <el-link icon="el-icon-refresh" :underline="false" @click="refreshRoute">刷新页面 </el-link>
      </li>
      <li>
        <el-link icon="el-icon-back" :underline="false" @click="closeLeft">关闭左侧</el-link>
      </li>
      <li>
        <el-link icon="el-icon-right" :underline="false" @click="closeRight">关闭右侧</el-link>
      </li>
      <li>
        <el-link icon="el-icon-close" :underline="false" @click="closeAll">关闭所有</el-link>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState } from 'vuex'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Humburger',
  data() {
    return {
      currentContextTabId: '',
      editableTabsValue: localStorage.getItem('path'),
      tabIndex: 2,
      editableTabs: [
        {
          href: '/Control',
          id: 'adaf1dc336c2497b941fe0ea0f248b99',
          name: '数据看板',
        },
      ],
      showContextMenu: false,
      contextMenuStyle: {
        left: 0,
        top: 0,
      },
      menuTree: [],
    }
  },

  mounted() {
    if (localStorage.getItem('path') != null) {
      this.$router.push({ path: localStorage.getItem('path') })
    }
    if (localStorage.getItem('visiteds') != null) {
      this.editableTabs = JSON.parse(localStorage.getItem('visiteds'))
    }
  },

  methods: {
    // 刷新页面
    refreshRoute() {
      this.$forceUpdate()
      this.$router.push({ path: this.currentContextTabId })
    },
    // 关闭左侧
    closeLeft() {
      let tabIndex = ''
      tabIndex = this.editableTabs.map((x, i) => x.href).indexOf(this.currentContextTabId)
      this.editableTabs = this.editableTabs.filter((x, i) => tabIndex <= i)
      localStorage.setItem('visiteds', JSON.stringify(this.editableTabs))
    },
    // 关闭右侧
    closeRight() {
      let tabIndex = ''
      tabIndex = this.editableTabs.map((x, i) => x.href).indexOf(this.currentContextTabId)
      this.editableTabs = this.editableTabs.filter((x, i) => tabIndex >= i)
      localStorage.setItem('visiteds', JSON.stringify(this.editableTabs))
    },
    // 关闭所有
    closeAll() {
      // this.editableTabs = this.editableTabs.filter((item) => item.href == '/workDesk')
      // 将this.editableTabs中的对象全部删除，并且替换为final
      this.editableTabs = [
        {
          href: '/workDesk',
          icon: 'icon-gongzuotai1',
          id: '96a32cb01cf14e91bfff51a89b3ff921',
          name: '工作台',
        },
      ]
      // this.$store.commit('Tage', '/workDesk')
      this.$router.push({ path: '/workDesk' })
      localStorage.setItem('visiteds', JSON.stringify(this.editableTabs))
    },
    // 鼠标右键单击
    onContextMenu(item, ctx) {
      this.currentContextTabId = ctx.srcElement.id.split('-')[1]
      this.contextMenuStyle.left = ctx.x + 15 + 'px'
      this.contextMenuStyle.top = parseInt(ctx.y) + 10 + 'px'
      this.showContextMenu = true
    },

    // 关闭菜单
    closeMenu() {
      this.showContextMenu = false
    },
    // 点击tabs 实现跳转路由
    clickTab(tab) {
      this.$store.commit('Tage', tab.name)
      this.$router.push({ path: tab.name })
      this.$store.commit('getCurrentMenu', this.findIdByHref(this.menuTree, tab.name))
    },
    findIdByHref(arr, href) {
      for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < arr[i].children.length; j++) {
          if (arr[i].children[j].href === href) {
            return arr[i].id
          }
        }
      }
      return null
    },
    // 截取前一个tab
    getBeforeTab(arr, href) {
      // let tabIndex = ''
      // tabIndex = this.editableTabs.map((x, i) => x.href).indexOf(this.currentContextTabId)
      // if (tabIndex == 0) {
      //   return this.editableTabs[0]
      // } else {
      //   return this.editableTabs[tabIndex - 1]
      //  根据closeBefore.href获取this.editableTabs这个数组中的前一个对象
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].href === href) {
          return arr[i - 1] ? arr[i - 1] : arr[i]
        }
      }
    },
    // 删除tabs
    removeTab(targetName) {
      let closeIndex = this.editableTabs.findIndex((item) => item.href == targetName) //获取当前关闭的索引
      if (this.editableTabs.length == 1) {
        // 当数组长度为1时不执行操作
        return
      } else {
        if (closeIndex == this.editableTabs.length - 1) {
          //判断当前关闭的是是否是最后一个
          let closeBefore =
            this.editableTabs[this.editableTabs.findIndex((item) => item.href == targetName) - 1] //获取关闭前一个的数据
          const getBeforeTab = this.getBeforeTab(this.editableTabs, targetName)
          this.editableTabs.splice(
            this.editableTabs.findIndex((item) => item.href == targetName),
            1
          )
          this.$router.push({ path: getBeforeTab.href })
          this.$store.commit('Tage', getBeforeTab.href)
        } else if (targetName == this.Activepath) {
          //判断是否关闭的是当前页面
          let closeBefore =
            this.editableTabs[this.editableTabs.findIndex((item) => item.href == targetName) + 1] //获取关闭后一个的数据
          this.editableTabs = this.editableTabs.filter((x) => x.href != targetName) //将当前关闭的这一项去除掉
          const getBeforeTab = this.getBeforeTab(this.editableTabs, closeBefore.href)
          this.$router.push({ path: getBeforeTab.href })
          this.$store.commit('Tage', getBeforeTab.href)
        } else {
          this.editableTabs.splice(
            this.editableTabs.findIndex((item) => item.href == targetName),
            1
          )
        }
      }
      localStorage.setItem('visiteds', JSON.stringify(this.editableTabs))
    },
  },
  watch: {
    showContextMenu(val) {
      if (val) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    },
    visited(NEWV) {
      // 判断是否重复
      let isDuplicate = this.editableTabs.some((item) => item.href === NEWV.href)
      // 如果不重复，则添加到可编辑标签中
      if (!isDuplicate) {
        if (this.editableTabs.length == 10) {
          // 删除第一个
          this.editableTabs.shift()
        }
        this.editableTabs.push(NEWV)
        localStorage.setItem('visiteds', JSON.stringify(this.editableTabs))
      }
    },
    Tage(NEWV) {
      this.$router.push(NEWV) //跳转路由
      this.editableTabsValue = NEWV //监听路由的变化，给tab赋值
    },
    powerMenu(NEWV) {
      this.menuTree = NEWV
    },
  },
  computed: {
    ...mapState(['Activepath', 'powerMenu']),
    visited() {
      return this.$store.state.visited
    },
    Tage() {
      return this.$store.state.Activepath
    },
  },
}
</script>
<style lang="less" scoped>
.el-tabs {
  :deep(.el-tabs__header) {
    margin-bottom: 0;
  }
}

:deep(.el-tabs__item) {
  background: #ffffff;
  border-radius: 2px;
  margin: 5px;
  height: 28px;
  line-height: 28px;
}

.el-tabs--card>.el-tabs__header .el-tabs__nav {
  border: none;
}

.el-tabs--card>.el-tabs__header .el-tabs__item {
  border: none;
}

:deep(.contex-menu-wrapper) {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);

  li {
    margin: 0;
    padding: 7px 12px;
    cursor: pointer;

    i {
      margin: 0 5px 0 0;
    }

    &:hover {
      background: #eee;
    }
  }
}
</style>
